<template>
    <v-card
        max-width="800px"
    >
        <v-card-text>
            <v-container>
                <v-row>
                    <v-col
                    cols="12"
                    sm="6"
                    md="9"
                    >   
                        <v-container fluid>
                            <v-row dense>
                            <v-col cols="1">
                                <v-icon>mdi-square-edit-outline</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <v-text-field
                                    solo
                                    v-model="info.taskName"
                                    label="任务简称"
                                ></v-text-field>
                            </v-col>
                            </v-row>

                            <v-row dense>
                                <v-col cols="1">
                                  <v-icon small>mdi-account-plus-outline</v-icon>
                                </v-col>
                                <v-col cols="5">
                                    <div class="text-h7 inline"><span>创建者：{{info.creator}}</span></div>
                                </v-col>
                                <v-col cols="1">
                                    <v-icon small>mdi-clock-outline</v-icon>
                                </v-col>
                                <v-col cols="5">
                                    <div class="text-h7 inline"><span>创建时间：{{info.startDate}} {{info.startTime}}</span></div>
                                </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon>mdi-playlist-edit</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <div class="text-h7 inline"><span>详情描述|完成情况</span></div>
                            </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">

                            </v-col>
                            <v-col cols="11">
                                <div id="detailInfo">
                                    <textarea v-model="info.content" style="display:none;"></textarea>
                                </div>
                            </v-col>
                            </v-row>

                            <v-row dense>
                                <v-col cols="1">
                                    <v-icon small>mdi-account-check</v-icon>
                                </v-col>
                                <v-col cols="5">
                                    <div class="text-h7 inline"><span>负责人：{{info.executor}} </span></div>
                                </v-col>
                                <v-col cols="1">
                                <v-icon small>mdi-clock-outline</v-icon>
                                </v-col>
                                <v-col cols="5">
                                    <div class="text-h7 inline"><span>截止时间：{{info.endDate}} {{info.endTime}}</span></div>
                                </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon small>mdi-account-heart-outline</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <div class="text-h7 inline"><span>关注者：{{info.followers}} </span></div>
                            </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon small>mdi-priority-high</v-icon>
                            </v-col>
                            <v-col cols="5">
                                <div class="text-h7 inline"><span>优先级：<v-btn text :color="levelColor" dense small>{{info.priority}}</v-btn></span></div>
                            </v-col>

                            <v-col cols="1">
                                <v-icon small>mdi-radiobox-blank</v-icon>
                            </v-col>
                            <v-col cols="5">
                                <div class="text-h7 inline"><span>任务状态：<v-btn text :color="info.status? 'green':'red'" dense small>{{info.status? "完成":"未完成"}}</v-btn></span></div>
                            </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon small>mdi-open-in-new</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <div class="text-h7 inline">
                                    外部链接：<v-btn text :href="info.link" color="blue" dense small>{{info.link}}</v-btn>
                                </div>

                            </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon small>mdi-paperclip</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <div class="text-h7 inline"><span>附件名称：{{info.attachment ? info.attachment.name:"no file"}} </span></div>
                            </v-col>
                            </v-row>

                            <v-row dense>
                            <v-col cols="1">
                                <v-icon small>mdi-bell-outline</v-icon>
                            </v-col>
                            <v-col cols="11">
                                <div class="text-h7 inline"><span>消息通知：{{info.tipPath}} </span></div>
                            </v-col>
                            </v-row>
                        </v-container>
                    </v-col>
                    <v-col
                    cols="12"
                    sm="6"
                    md="3"
                    >
                        <!-- <span>操作区域</span> -->
                        <div class="btnDiv">
                        <v-btn
                            color="#b3ffe8"
                            width="130px"
                            @click="setTaskStatus"
                        ><v-icon small>mdi-radiobox-blank</v-icon>{{ changeStatus }}</v-btn>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialoglevel = true"
                            ><v-icon small>mdi-priority-high</v-icon>优先级</v-btn>
                            <v-dialog
                                v-model="dialoglevel"
                                max-width="500px"
                            >
                                <v-card>
                                    <v-card-title>
                                        <v-combobox
                                            :items="levelItems"
                                            v-model="info.priority"
                                            label="优先级:"
                                            outlined
                                            dense
                                            @change="changeLevelColor()"
                                            prepend-icon="mdi-priority-high"
                                        ></v-combobox>
                                    </v-card-title>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogActer = true"
                            ><v-icon small>mdi-account-check</v-icon>负责人</v-btn>
                            <v-dialog
                                v-model="dialogActer"
                                max-width="500px"
                            >
                                <v-card>
                                    <v-card-title>
                                        <v-combobox
                                            :items="groupsItems"
                                            v-model="info.executor"
                                            label="负责人:"
                                            outlined
                                            multiple
                                            dense
                                            prepend-icon="mdi-account-check"
                                        ></v-combobox>
                                    </v-card-title>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogWatcher = true"
                            ><v-icon small>mdi-account-heart-outline</v-icon>关注人</v-btn>
                            <v-dialog
                                v-model="dialogWatcher"
                                max-width="500px"
                            >
                                <v-card>
                                    <v-card-title>
                                        <v-combobox
                                            :items="groupsItems"
                                            v-model="info.followers"
                                            label="关注者:"
                                            outlined
                                            multiple
                                            dense
                                            prepend-icon="mdi-account-heart-outline"
                                        ></v-combobox>
                                    </v-card-title>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogTime = true"
                            ><v-icon small>mdi-clock-outline</v-icon>计划时间</v-btn>
                            <v-dialog
                                v-model="dialogTime"
                                max-width="660px"
                                height="450px"
                            >
                                <v-card height="1000px">
                                    <v-card-title><h2>选择任务的起始时间：</h2></v-card-title>
                                    <v-card-text>
                                    <v-row>
                                        <v-col cols="6">
                                            <h3>开始时间：</h3>
                                        </v-col>
                                        <v-col cols="6">
                                            <h3>结束时间：</h3>
                                        </v-col>
                                    </v-row>
                                    <v-row dense>
                                        <v-col cols="6">
                                            <v-date-picker
                                                v-model="info.startDate"
                                            ></v-date-picker>
                                        </v-col>
                                        <v-col>
                                            <v-date-picker
                                            v-model="info.endDate"
                                            ></v-date-picker>
                                        </v-col>
                                    </v-row>
                                    <v-row dense>
                                        <v-col cols="6">
                                            <v-time-picker
                                                v-model="info.startTime"
                                                format="24hr"
                                                small
                                            ></v-time-picker>
                                        </v-col>
                                        <v-col cols="6">
                                            <v-time-picker
                                                v-model="info.endTime"
                                                format="24hr"
                                                small
                                            ></v-time-picker>
                                        </v-col>
                                    </v-row>
                                    </v-card-text>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogLink = true"
                            ><v-icon small>mdi-open-in-new</v-icon>外部链接</v-btn>
                            <v-dialog
                                v-model="dialogLink"
                                max-width="500px"
                            >
                                <v-card>
                                    <v-text-field
                                        v-model="info.link"
                                        label="外部Http链接"
                                        width="300px"
                                        class="btnDiv"
                                    ></v-text-field>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogFile = true"
                            ><v-icon small>mdi-paperclip</v-icon>添加附件</v-btn>
                            <v-dialog
                                v-model="dialogFile"
                                max-width="500px"
                            >
                                <v-card>
                                    <v-file-input
                                        v-model="info.attachment"
                                        accept="*"
                                        label="File input"
                                        width="200px"
                                        class="btnDiv"
                                        prepend-icon="mdi-paperclip"
                                    ></v-file-input>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                            <v-btn
                                color="#b3ffe8"
                                width="130px"
                                @click="dialogTips = true"
                            ><v-icon small>mdi-bell-outline</v-icon>提醒方式</v-btn>
                            <v-dialog
                                v-model="dialogTips"
                                max-width="500px"
                            >
                                <v-card height="230px">
                                    <v-card-title>配置提醒方式：</v-card-title>
                                    <v-card-text>
                                    <v-row>
                                        <v-col cols="3">
                                            <v-radio-group v-model="info.tipType">
                                                <v-radio
                                                    label="钉钉"
                                                    value="ding"
                                                ></v-radio>
                                                <v-radio
                                                    label="邮箱"
                                                    value="email"
                                                ></v-radio>
                                            </v-radio-group>
                                        </v-col>
                                        <v-col cols="9">
                                            <v-text-field
                                                v-model="info.cycle"
                                                label="任务周期（天数）：-1表示一次性任务"
                                                dense
                                            ></v-text-field>
                                            <v-combobox
                                                v-model="info.result"
                                                :items="tipDays"
                                                label="预警天数"
                                                dense
                                            ></v-combobox>
                                            <v-combobox
                                                v-model="info.tipPath"
                                                :items="ddList"
                                                label="接收信息的钉钉WebURL或邮箱"
                                                dense
                                            ></v-combobox>
                                        </v-col>
                                    </v-row>
                                    </v-card-text>
                                </v-card>
                            </v-dialog>
                        </div>
                        <div class="btnDiv">
                        <v-btn
                            color="green"
                            width="130px"
                            @click="addTask"
                        ><v-icon small>mdi-content-save</v-icon>保存</v-btn>
                        </div>
                        <div class="btnDiv">
                        <v-btn
                            color="primary"
                            width="130px"
                            @click="saveDoneStatus"
                        ><v-icon small>mdi-content-save</v-icon>归档</v-btn>
                        </div>
                        <div class="btnDiv">
                        <v-btn
                            color="error"
                            width="130px"
                            @click="deletTask"
                        ><v-icon small>mdi-delete-outline</v-icon>删除</v-btn>
                        </div>
                    </v-col>
            </v-row>
            </v-container>
        </v-card-text>

    </v-card>

</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {

    },
    props: {
        info: {
            type: Object
      }
    },
    data(){
        return {
            instance: null,
            dialoglevel: false,
            dialogActer: false,
            dialogWatcher: false,
            dialogTime: false,
            dialogLink: false,
            dialogFile: false,
            dialogTips: false,
            tipDays: [1,2,3,4,5],
            ddList: [],
            levelColor: 'red',
            editedIndex: -1,
            info: {},
            groupsItems: [],
            groupsList: [],
            levelItems: ['重要且紧急', '重要不紧急', '紧急不重要', '不重要不紧急']
        }
    },
    computed: {
        changeStatus () {
            return this.info.status === true ? '标记未完成' : '标记已完成'
        },
        dateRangeText () {
            return this.dates.join(' ~ ')
        },

    },
    mounted(){
        console.log(this.childApp)
        this.initMarkdown()
        this.changeLevelColor()
        this.getGroups()
        this.getDDList()
    },
    methods: {
        initMarkdown: function(){
            this.instance = window.editormd("detailInfo", {
                height: '150px',
                width: '100%',
                emoji: true,
                path: 'editormd/lib/',
                watch: false,
                mode: 'YAML',
                toolbar  : false,
                toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
                    return ["undo", "redo", "|", "watch"]; // full, simple, mini
                },
            })
            // this.instance.unwatch()
        },
        changeLevelColor(){
            let cur_level = this.info.priority
            switch(cur_level){
                case '重要且紧急':
                    this.levelColor = 'red'
                    break
                case '重要不紧急':
                    console.log('重要不紧急')
                    this.levelColor = 'yellow'
                    break
                case '紧急不重要':
                    this.levelColor = 'blue'
                    break
                case '不重要不紧急':
                    this.levelColor = 'green'
                    break
                default:
                    this.levelColor = 'black'
                    break

            }
        },
        setTaskStatus(){
            this.info.status = !this.info.status
            let get_data = {'taskId': this.info.taskId, 'status': this.info.status}
            console.log(this.info)
            this.$api.task.updateStatus(get_data).then(res=>{
                console.log(res)
                if(res.data.success===1){
                    this.$emit('queryData');
                }
            })

        },
        getGroups(){
            let get_data = {'username': localStorage.getItem('username')}
            console.log(get_data)
            this.$api.task.getGroupList(get_data).then(res=>{
                console.log(res)
                this.groupsList = res.data.data
                this.getGroupItem(this.groupsList)
            })
        },
        getGroupItem: function(lst){
            let _this = this
            let cur_user = localStorage.getItem('username')
            _this.info.creator = cur_user
            let cur_date = _this.formatDate(0)
            let next_date = _this.formatDate(3)
            _this.info.startDate = cur_date.date
            _this.info.startTime = cur_date.time
            _this.info.endDate = next_date.date
            _this.info.endTime = next_date.time
            lst.forEach(dic => {
                this.groupsItems.push(dic.cn_name)
                if(dic.user === cur_user){
                    let cn_name = dic.cn_name
                    _this.info.creator = cn_name
                    _this.info.executor.push(cn_name)
                }
            });
        },
        formatDate(days) {
            let date = new Date(Date.now() + days*24*60*60*1000);
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            let nowDate = `${year}-${month}-${day}`;
            let nowTime = `${hour}:${minute}:${second}`;
            let cur_date = {'date': nowDate, 'time': nowTime}
            return cur_date
        },
        getDDList(){
            let get_data = {'app': 'task'}
            this.$api.task.getTaskConfig(get_data).then(res=>{
                console.log('get_group_info ...')
                console.log(res)
                if(res.data.success===1){
                    let data_list = res.data.data
                    data_list.forEach(unit=>{
                        let key_name = unit.key_name
                        console.log(key_name)
                        this.ddList.push(key_name)
                    })
                }
            })
        },
        addTask: function(){
            console.log('addTask ....')
            if(this.info.taskName===""){
                alert('任务名称为空！')
            }else{
                this.info.content = this.instance.getMarkdown()
                let post_data = {"task_info": this.info}
                this.$api.task.addTask(post_data).then(res=>{
                    console.log('addTask response...')
                    console.log(res)
                    if(res.data.success===1){
                        this.info.taskId = res.data.taskId
                        this.$emit('queryData');
                    }
                    alert(res.data.message)
                })
            }
        },
        saveDoneStatus(){
            console.log('deletTask ....')
            if(!this.info.taskId){
                alert('任务不存在！')
                return false
            }
            if(!this.info.status){
                alert('任务是未完成状态，不可归档！')
                return false
            }else{
                let task_id = this.info.taskId 
                let get_data = {'taskId': task_id}
                this.$api.task.setFinish(get_data).then(res=>{
                    this.$emit('queryData')
                    alert(res.data.message)
                    this.$emit('deleteTask');
                })
            }
        },

        deletTask: function(){
            console.log('deletTask ....')
            let task_id = this.info.taskId
            if(!this.info.status){
                alert('任务是未完成状态，不可删除！')
            }else{
                if(task_id){
                    console.log(task_id)
                    let get_data = {'taskId': task_id}
                    this.$api.task.deleteTask(get_data).then(res=>{
                        if(res.data.success===1){
                            this.$emit('queryData')
                            alert(res.data.message)
                            this.$emit('deleteTask');
                        }
                    })
                }
            }
            
        }
    }
})
</script>

<style scoped>
.inline {
    display: inline
}
.divRow {
    margin-top: 15px;
}
.btnDiv {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>